<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <title>Title</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${ctx}/resources/layuimini/lib/layui-v2.6.3/css/layui.css" media="all">
</head>
<body style="margin: 10px">
    <%--查询条件开始--%>
    <blockquote class="layui-elem-quote">
        <form class="layui-form" id="searchFrm" lay-filter="searchFrm">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">登录名</label>
                    <div class="layui-input-inline">
                        <input type="text" placeholder="请输入登录名" name="userName" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">真实姓名</label>
                    <div class="layui-input-inline">
                        <input type="text" placeholder="请输入真实姓名" name="realName" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">在职状态</label>
                    <div class="layui-input-inline">
                        <input type="radio" value="1" name="deleted" title="在职">
                        <input type="radio" value="2" name="deleted" title="离职">
                    </div>
                </div>
                <div class="layui-inline">
                    <button type="button" class="layui-btn" lay-submit="" lay-filter="doSearch">查询</button>
                    <button type="reset" class="layui-btn layui-btn-danger">重置</button>
                </div>
            </div>
        </form>
    </blockquote>
    <%--查询条件结束--%>
    <!--数据表格开始-->
    <div>
        <table class="layui-hide" id="userTable" lay-filter="userTable"></table>
        <script type="text/html" id="userTableToolbar">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
            </div>
        </script>
        <script type="text/html" id="userTableRowBar">
            <a class="layui-btn layui-btn-xs" lay-event="update">修改</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
            <a class="layui-btn layui-btn-xs" lay-event="resetPwd">重置密码</a>
            <a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="remove">移除</a>
        </script>
    </div>
    <!--数据表格结束-->
    <!--添加 添加修改弹出层开始-->
    <div id="addOrUpdateDiv" style="display: none;margin: 8px" >
        <form class="layui-form" id="dataFrm" lay-filter="dataFrm">
            <div class="layui-form-item">
                <label class="layui-form-label">登录名</label>
                <div class="layui-input-block">
                    <!--修改是要提交一个ID到后台-->
                    <input type="hidden" name="id">
                    <input type="text" name="username" placeholder="请输入登录名" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">真实名称</label>
                <div class="layui-input-block">
                    <input type="text" name="realname" placeholder="请输入真实名称" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">角色</label>
                <div class="layui-input-block">
                    <input type="radio" value="1" name="role" title="管理员" >
                    <input type="radio" value="2" name="role" title="业务员" checked >
                </div>
            </div>
            <div class="layui-form-item" style="text-align: center">
                <button type="button" class="layui-btn" lay-submit="" lay-filter="doSubmit">保存</button>
                <button type="reset" class="layui-btn layui-btn-danger" >重置</button>
            </div>
        </form>
    </div>
    <!--添加 添加修改弹出层结束-->
</body>
<script src="${ctx}/resources/layuimini/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="${ctx}/resources/layuimini/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script>
    layui.use(['form', 'layer', 'table','jquery'], function () {
        let form = layui.form;
        let table = layui.table;
        let layer = layui.layer;
        let $ = layui.jquery;
        //渲染数据表格
        let userTable = table.render({
            elem: '#userTable'
            , url: '${ctx}/user/query.action'
            , toolbar: '#userTableToolbar'//开启头部工具栏，并为其绑定左侧模板
            , title: '用户数据表'//excel导出的文件名
            , height: 'full-200'
            , cols: [[
                {field: 'id', title: 'ID', align: "center",width: 60}
                , {field: 'username', title: '登陆名', align: "center",width: 120}
                , {field: 'realname', title: '真实名', align: "center",width: 100}
                , {
                    field: 'role', title: '角色',width: 100, align: "center", templet: function (d) {
                        let str = "";
                        if (d.role == 1) {
                            str = "<font color='blue' >管理员</font>"
                        } else if (d.role == 2) {
                            str = "<font color='purple' >员工</font>"
                        }
                        return str;
                    }
                }
                , {
                    field: 'deleted', title: '在职状态',width: 100,align: "center", templet: function (d) {
                        let str = "";
                        if (d.deleted == 1) {
                            str = "<font color='blue' >在职</font>"
                        } else if (d.deleted == 2) {
                            str = "<font color='red' >离职</font>"
                        }
                        return str;
                    }
                }
                , {field: 'createTime', title: '创建时间', align: "center",width: 180}
                , {field: 'updateTime', title: '更新时间', align: "center",width: 180}
                , {field: 'deletedTime', title: '离职时间', align: "center",width: 180}
                , {fixed: 'right', title: '操作', align: "center", toolbar: '#userTableRowBar'}
            ]]
            , page: true
        });
        //监听查询按钮的点击
        form.on("submit(doSearch)", function (data) {
            let params = data.field;
            console.log(params);
            userTable.reload({
                //每次模糊查询 都回到第一页
                page: {
                    curr: 1
                },
                //查询条件
                where: params
            })
        })

        //头工具栏事件
        table.on('toolbar(userTable)', function(obj){
            switch(obj.event){
                case "add":
                    openAddUserLayer();
                    break;
            };
        });

        //监听行工具事件
        table.on('tool(userTable)', function(obj){
            var data = obj.data;
            if(obj.event === 'del'){
                doDelete(data);
            } else if(obj.event === 'update'){
                layer.msg("update")
                openUpdateUserLayer(data);
            } else if(obj.event === 'resetPwd'){
                layer.msg("resetPwd")
                resetPwd(data);
            } else if(obj.event === 'remove') {
                layer.msg("remove")
                remove(data);
            }
        });
        //声明一个全局url
        let url = "";
        //声明一个存放弹出层索引的变量
        let index = 0;
        //打开添加的弹出层
        function openAddUserLayer() {
            index = layer.open({
                type:1,
                content:$("#addOrUpdateDiv"),
                area:['500','400'],
                title:"添加用户",
                success:function () {
                    //重置表单
                    $("#dataFrm")[0].reset();
                    //赋值url
                    url="${ctx}/user/add.action";
                }
            })
        }
        //打开修改的弹出层
        function openUpdateUserLayer(data) {
            console.log(data);
            index = layer.open({
                type:1,
                content:$("#addOrUpdateDiv"),
                area:['500','400'],
                title:"修改【"+data.realname+"】用户",
                success:function () {
                    //把当前行的数据填入表单
                    form.val('dataFrm',data)
                    //赋值url
                    url="${ctx}/user/update.action";
                }
            })
        }
        //监听表单保存按钮的点击
        form.on("submit(doSubmit)",function (data) {
            let params = data.field;
            //发送请求
            $.post(url,params,function (res) {
                if(res.code == 200) {
                    layer.msg(res.msg);
                    //刷新表格
                    userTable.reload();
                    //关闭弹出层
                    layer.close(index)
                }else {
                    layer.msg(res.msg);
                }
            })
        })

        //离职
        function doDelete(data) {
            layer.confirm('确定要让【'+data.realname+'】离职吗？',function (index) {
                $.post("${ctx}/user/del.action",{id:data.id},function (res) {
                    if(res.code == 200) {
                        layer.msg(res.msg);
                        //关闭弹窗
                        layer.close(index);
                        //刷新表格
                        userTable.reload();
                    }else {
                        layer.msg(res.msg);
                    }
                })
            })
        }

        //重置密码
        function resetPwd(data) {
            layer.confirm('确定要重置【'+data.realname+'】的密码吗？',function (index) {
                $.post("${ctx}/user/resetPwd.action",{id:data.id},function (res) {
                    if(res.code == 200){
                        layer.msg(res.msg);
                        //关闭弹窗
                        layer.close();
                    }else {
                        layer.msg(res.msg);
                    }
                })
            })
        }

        //移除员工
        function remove(data) {
            layer.confirm('确定要移除【'+data.realname+'】吗？',function (index) {
                $.post("${ctx}/user/remove.action",{id:data.id},function (res) {
                    if(res.code == 200){
                        layer.msg(res.msg);
                        //关闭弹窗
                        layer.close();
                        //刷新表格
                        userTable.reload();
                    }else {
                        layer.msg(res.msg);
                    }
                })
            })
        }

    })
</script>
</html>
